<template>
	<div class="container-mask"></div>
	<div class="login-container">
		<div class="login-header-bg"></div>
		<div class="login-form">
			<h3>水站系统</h3>
			<n-form ref="formRef" :label-width="80" :model="model" :rules="rules">
				<n-form-item label="登录名" path="userName">
					<n-input v-model:value="model.userName" placeholder="输入登录名" />
				</n-form-item>
				<n-form-item label="密码" path="pwd">
					<n-input v-model:value="model.pwd" type="password" placeholder="输入密码" />
				</n-form-item>
				<n-form-item>
					<n-button class="wp-100" attr-type="button" @click="handleValidateClick">
						登  录
					</n-button>
				</n-form-item>
			</n-form>
		</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import { FormInst } from 'naive-ui'
	import { login } from '@/api/system'
	import { useRouter } from 'vue-router';
	import { userStore } from "@/store/index";
	// import { Socket } from 'socket.io-client';
	
	interface ModelType {
		userName : string | null
		pwd : string | null
	}
	export default defineComponent({
		name: 'Login',
		setup() {
			const formRef = ref<FormInst | null>(null)
			const modelRef = ref<ModelType>({
				userName: null,
				pwd: null,
			})
			const router = useRouter()
			const store = userStore()
			
			// const socket = inject('socket') as Socket;
			// socket.on("connection", (data) => {
			//   console.log(socket.id, '链接成功',data);
			// })
			// socket.on("disconnect", (data) => {
			//   socket.connect()
			// })
			return {
				store,
				formRef,
				model: modelRef,
				rules: {
					userName: {
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					},
					pwd: {
						required: true,
						message: '请输入密码',
						trigger: ['input', 'blur']
					}
				},
				handleValidateClick(e : MouseEvent) {
					e.preventDefault()
					formRef.value?.validate((errors) => {
						if (!errors) {
							login(modelRef.value).then(res => {
								console.log(res)
								const { code, data: { token, data } } = res.data
								if (code == 200) {
									store.setLogin(token, data)
									router.push("/")
								}
							})
						} else {
							console.log(errors)
							message.error('Invalid')
						}
					})
				}
			}
		}
	})
</script>

<style scoped lang="scss">
	.login-container {
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 1;
		position: relative;
	}

	.login-header-bg {
		width: 500px;
		height: 500px;
		background: url("@/assets/summer.svg") no-repeat;
		background-size: 80% 105%;
		z-index: 3;
	}

	.container-mask {
		position: absolute;
		height: 100vh;
		width: 100vw;
		background-color: #ffffff;
		opacity: .4;
	}

	.login-form {
		width: 500px;
		padding: 15px;
		height: auto;
		border-radius: 5px;
		box-shadow: 0px 0px 2px #b6b6b6;
		z-index: 10;
	}
</style>